<template>
  <div class="home">
    <!-- 首页的头部 -->
    <home-header></home-header>
    <home-icons :titles="titles" ref="homeIcons" class="home-icons" v-show="isIconsFixed" ></home-icons>
    
    <scroll class="content" 
            ref="scroll" 
            :probe-type='3'
            @scroll="contentScroll"
            :pull-up-load= "true"
            @pullingUp = 'loadMore'
             >
      <!-- 首页的轮播图 -->
      <home-swiper @swiperImageLoad="swiperImageLoad"></home-swiper>

      <!-- 首页字体轮播图 -->
      <home-icons :titles="titles" ref="homeIcons" @tabClick="tabClick"></home-icons>

      <!-- 首页的商品列表 -->
      <home-recommend @itemImageLoad="itemImageLoad"  :goods="showGoods"></home-recommend>
    </scroll>

      <!-- 返回顶部的按钮 -->
    <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>

    <!-- 页面底部的小图标 -->
    <home-main-tabbar></home-main-tabbar>
  </div>
</template>

<script>
import HomeMainTabbar from 'components/content/mainTabbar/MainTabbar'
import HomeHeader from './components/header'
import HomeSwiper from './components/swiper'
import HomeIcons from './components/icons'
import HomeRecommend from './components/recommend'

import Scroll from 'components/common/scroll/Scroll'
import BackTop from  'components/content/backTop/BackTop.vue'
import { getHomeIconsdata ,getHomeSpeciesGoods,getHomeSpaceGoods,getHomeStyleGoods} from 'network/home'
export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeMainTabbar,
    Scroll,
    BackTop
  },
  data() {
    return {
      goods: {
        species: { list: [] },
        space: { list: [] },
        style: { list: [] },
      },
      /* 一开始首页中的商品数据为品类中的商品数据 */
      currentType: "species",
      
      /* 保持位置 */
      saveY: 0,

      titles:[],
      currentType: "species",
      /* 反会顶部的按钮一开始隐藏 */
      isShowBackTop:false,
      /* 吸顶时距离顶部的高度*/
      topOffsetTop:0,
      /* 是否 吸顶  */
      isIconsFixed:false
    }
  },
  /* 进来 */
  activated() {
    this.$refs.scroll.scrollTo(0, this.saveY, 0);
    this.$refs.scroll.refresh();
  },
  /* 出去 */
  deactivated() {
    this.saveY = this.$refs.scroll.getScrollY;
  },
  created() {
    this.getHomeIconsdata()
    this.getHomeSpeciesGoods()
    this.getHomeSpaceGoods()
    this.getHomeStyleGoods()
  },
  computed: {
    showGoods() {
      return this.goods[this.currentType].list;
    },
  },
  methods: {
    tabClick(index) {
       switch (index) {
         case 0:
           this.currentType = "species";
           break;
         case 1:
           this.currentType = "space";  
           break;
         case 2:
           this.currentType = "style";  
           break;
       }
     },
    swiperImageLoad () {
      // console.log(this.$refs.homeIcons.$el.offsetTop)
      this.topOffsetTop = this.$refs.homeIcons.$el.offsetTop
    },
    /* better-scroll在决定有多少区域可以滚动的时候是根据scrollHeight属性决定的 
       crollHeight属性是根据better-scroll的content中的子组件的高度
       一开始计算crollHeight属性的时候是没有将图片计算在内的后来图片加载进来了，
       有了新的高度，但是crollHeight属性并没有进行更新，
       解决：监听每一张图片是否架加载完成，只要有一张图片加载完成，就执行一次refresh()
    */
    itemImageLoad () {
      // console.log(1)
      this.$refs.scroll.refresh()
    },

    /* 预留上拉加载更多 */
    loadMore () {
      console.log('上拉加载更多')
    },

    /* 点击小图标返回到最上面 */
    backClick () {
      this.$refs.scroll.scrollTo(0,0)
    }, 
    
    /* 控制小图标的显示隐藏 */
    contentScroll (position) {
      //判断backTop是否显示
      this.isShowBackTop =  (-position.y) > 200

      //决定homeicons是否吸顶（positionfixed）
      this.isIconsFixed = (-position.y) > this.topOffsetTop

    },
    
    /* 网络请求的相关方法 */

    /* 这是请求接口获得首页轮播图标的 */
    getHomeIconsdata() {
      getHomeIconsdata().then((res) => {
        this.titles = res.result
        // console.log(res)
      });
    },

    //首页请求品类的函数
    /* 
      后端节接口写的不够好，个人认为应该把首页的数据都写在一个接口中，
      完事前端在调用接口的时候只需要调用一次接口发送一次请求即可，这样这能发多次请求浪费资源
    */
    getHomeSpeciesGoods() {
      getHomeSpeciesGoods().then((res) => {
        // console.log(res);

        let arr = res.result.records;
          for (let i = 0; i < arr.length; i++) {
            this.goods["species"].list.push({
              id: arr[i].id,
              img: arr[i].img,
              title: arr[i].goods_name,
              price: "￥" + arr[i].price,
              yuanjia: "￥" + arr[i].original,
              payment: "1025人付款",
              //   店名
              shopName: "无印良品旗舰店",
              //   地点
              place: "杭州>",
              // 更多
              spot: "...",
            });
          }
      });
    },

  //首页请求空间的函数
    getHomeSpaceGoods() {
      getHomeSpaceGoods().then((res) => {
        // console.log(res);

        let arr = res.result.records;
          for (let i = 0; i < arr.length; i++) {
            this.goods["space"].list.push({
              id: arr[i].id,
              img: arr[i].img,
              title: arr[i].goods_name,
              price: "￥" + arr[i].price,
              yuanjia: "￥" + arr[i].original,
              payment: "1025人付款",
              //   店名
              shopName: "无印良品旗舰店",
              //   地点
              place: "杭州>",
              // 更多
              spot: "...",
            });
          }
      });
    },

    //首页请求风格的函数
    getHomeStyleGoods() {
      getHomeStyleGoods().then((res) => {
        // console.log(res);

        let arr = res.result.records;
          for (let i = 0; i < arr.length; i++) {
            this.goods["style"].list.push({
              id: arr[i].id,
              img: arr[i].img,
              title: arr[i].goods_name,
              price: "￥" + arr[i].price,
              yuanjia: "￥" + arr[i].original,
              payment: "1025人付款",
              //   店名
              shopName: "无印良品旗舰店",
              //   地点
              place: "杭州>",
              // 更多
              spot: "...",
            });
          }
      });
    },



  },
};
</script>

<style lang="less" scoped>
.home {
  background: #eee;
  height: 100vh;
  position: relative;
  .content {
    position: absolute;
    overflow: hidden;
    top: 0.44rem;
    bottom: 0.49rem;
  }
}
.home-icons {
  position: relative;
  z-index: 9;
}
</style>
